<template>
  <div class="vlonChooseIcon">
    <nav v-for="(l,index) in list" :key="index" :data-class="'icon-'+l.name" :class="l.active" @click="chooseThisIcon(l,index)">
      <span class="icon" :class="'icon-'+l.name+(index==list.length-1?' text-danger':'')"></span>
      <span class="text">{{l.name}}</span>
    </nav>
  </div>
</template> 
<script>
export default {
  name: "vlonChooseIcon",
  data() {
    return {
      list: [
        {active:"",name:"qian"},
        {active:"",name:"dingdan2"},
        {active:"",name:"tixian1"},
        {active:"",name:"heilongjiangtubiao11"},
        {active:"",name:"erweima1"},
        {active:"",name:"shouji"},
        {active:"",name:"dingdan1"},
        {active:"",name:"gouwuche"},
        {active:"",name:"gudong1"},
        {active:"",name:"hexiaoshangpin"},
        {active:"",name:"xiaofei"},
        {active:"",name:"paihang"},
        {active:"",name:"zhibo1"},
        {active:"",name:"wodeyouhuiquan"},
        {active:"",name:"lingquyouhuiquan1"},
        {active:"",name:"shangcheng1"},
        {active:"",name:"fenxiao"},
        {active:"",name:"qiandao"},
        {active:"",name:"daituikuan2"},
        {active:"",name:"daifukuan1"},
        {active:"",name:"daishouhuo1"},
        {active:"",name:"daifahuo1"},
        {active:"",name:"bangzhu1"},
        {active:"",name:"shezhi"},
        {active:"",name:"dingwei1"},
        {active:"",name:"appreciate"},
        {active:"",name:"check"},
        {active:"",name:"close"},
        {active:"",name:"edit"},
        {active:"",name:"emoji"},
        {active:"",name:"favorfill"},
        {active:"",name:"favor"},
        {active:"",name:"loading"},
        {active:"",name:"locationfill"},
        {active:"",name:"location"},
        {active:"",name:"phone"},
        {active:"",name:"roundcheckfill"},
        {active:"",name:"roundcheck"},
        {active:"",name:"roundclosefill"},
        {active:"",name:"roundclose"},
        {active:"",name:"roundrightfill"},
        {active:"",name:"roundright"},
        {active:"",name:"search"},
        {active:"",name:"taxi"},
        {active:"",name:"timefill"},
        {active:"",name:"time"},
        {active:"",name:"unfold"},
        {active:"",name:"warnfill"},
        {active:"",name:"warn"},
        {active:"",name:"camerafill"},
        {active:"",name:"camera"},
        {active:"",name:"commentfill"},
        {active:"",name:"comment"},
        {active:"",name:"likefill"},
        {active:"",name:"like"},
        {active:"",name:"notificationfill"},
        {active:"",name:"notification"},
        {active:"",name:"order"},
        {active:"",name:"samefill"},
        {active:"",name:"same"},
        {active:"",name:"deliver"},
        {active:"",name:"evaluate"},
        {active:"",name:"pay"},
        {active:"",name:"send"},
        {active:"",name:"shop"},
        {active:"",name:"ticket"},
        {active:"",name:"back"},
        {active:"",name:"cascades"},
        {active:"",name:"discover"},
        {active:"",name:"list"},
        {active:"",name:"more"},
        {active:"",name:"myfill"},
        {active:"",name:"my"},
        {active:"",name:"scan"},
        {active:"",name:"settings"},
        {active:"",name:"questionfill"},
        {active:"",name:"question"},
        {active:"",name:"shopfill"},
        {active:"",name:"form"},
        {active:"",name:"pic"},
        {active:"",name:"filter"},
        {active:"",name:"footprint"},
        {active:"",name:"top"},
        {active:"",name:"pulldown"},
        {active:"",name:"pullup"},
        {active:"",name:"right"},
        {active:"",name:"refresh"},
        {active:"",name:"moreandroid"},
        {active:"",name:"deletefill"},
        {active:"",name:"refund"},
        {active:"",name:"cart"},
        {active:"",name:"qrcode"},
        {active:"",name:"remind"},
        {active:"",name:"delete"},
        {active:"",name:"profile"},
        {active:"",name:"home"},
        {active:"",name:"cartfill"},
        {active:"",name:"discoverfill"},
        {active:"",name:"homefill"},
        {active:"",name:"message"},
        {active:"",name:"addressbook"},
        {active:"",name:"link"},
        {active:"",name:"lock"},
        {active:"",name:"unlock"},
        {active:"",name:"vip"},
        {active:"",name:"weibo"},
        {active:"",name:"activity"},
        {active:"",name:"big"},
        {active:"",name:"friendaddfill"},
        {active:"",name:"friendadd"},
        {active:"",name:"friendfamous"},
        {active:"",name:"friend"},
        {active:"",name:"goods"},
        {active:"",name:"selection"},
        {active:"",name:"explore"},
        {active:"",name:"present"},
        {active:"",name:"squarecheckfill"},
        {active:"",name:"square"},
        {active:"",name:"squarecheck"},
        {active:"",name:"round"},
        {active:"",name:"roundaddfill"},
        {active:"",name:"roundadd"},
        {active:"",name:"add"},
        {active:"",name:"notificationforbidfill"},
        {active:"",name:"explorefill"},
        {active:"",name:"fold"},
        {active:"",name:"game"},
        {active:"",name:"redpacket"},
        {active:"",name:"selectionfill"},
        {active:"",name:"similar"},
        {active:"",name:"appreciatefill"},
        {active:"",name:"infofill"},
        {active:"",name:"info"},
        {active:"",name:"forwardfill"},
        {active:"",name:"forward"},
        {active:"",name:"rechargefill"},
        {active:"",name:"recharge"},
        {active:"",name:"vipcard"},
        {active:"",name:"voice"},
        {active:"",name:"voicefill"},
        {active:"",name:"friendfavor"},
        {active:"",name:"wifi"},
        {active:"",name:"share"},
        {active:"",name:"wefill"},
        {active:"",name:"we"},
        {active:"",name:"lightauto"},
        {active:"",name:"lightforbid"},
        {active:"",name:"lightfill"},
        {active:"",name:"camerarotate"},
        {active:"",name:"light"},
        {active:"",name:"barcode"},
        {active:"",name:"flashlightclose"},
        {active:"",name:"flashlightopen"},
        {active:"",name:"searchlist"},
        {active:"",name:"service"},
        {active:"",name:"sort"},
        {active:"",name:"down"},
        {active:"",name:"mobile"},
        {active:"",name:"mobilefill"},
        {active:"",name:"sanjiao2"},
        {active:"",name:"sanjiao1"},
        {active:"",name:"sanjiao4"},
        {active:"",name:"sanjiao3"},
        {active:"",name:"copy"},
        {active:"",name:"countdownfill"},
        {active:"",name:"countdown"},
        {active:"",name:"noticefill"},
        {active:"",name:"notice"},
        {active:"",name:"qiang"},
        {active:"",name:"upstagefill"},
        {active:"",name:"upstage"},
        {active:"",name:"babyfill"},
        {active:"",name:"baby"},
        {active:"",name:"brandfill"},
        {active:"",name:"brand"},
        {active:"",name:"choicenessfill"},
        {active:"",name:"choiceness"},
        {active:"",name:"clothesfill"},
        {active:"",name:"clothes"},
        {active:"",name:"creativefill"},
        {active:"",name:"creative"},
        {active:"",name:"female"},
        {active:"",name:"keyboard"},
        {active:"",name:"male"},
        {active:"",name:"newfill"},
        {active:"",name:"new"},
        {active:"",name:"pullleft"},
        {active:"",name:"pullright"},
        {active:"",name:"rankfill"},
        {active:"",name:"rank"},
        {active:"",name:"bad"},
        {active:"",name:"cameraadd"},
        {active:"",name:"focus"},
        {active:"",name:"friendfill"},
        {active:"",name:"cameraaddfill"},
        {active:"",name:"xinjian2"},
        {active:"",name:"add1"},
        {active:"",name:"answer"},
        {active:"",name:"app"},
        {active:"",name:"browser"},
        {active:"",name:"caller"},
        {active:"",name:"camera1"},
        {active:"",name:"card"},
        {active:"",name:"cart1"},
        {active:"",name:"check1"},
        {active:"",name:"code"},
        {active:"",name:"computer"},
        {active:"",name:"copy1"},
        {active:"",name:"delete1"},
        {active:"",name:"delete2"},
        {active:"",name:"deliver1"},
        {active:"",name:"display"},
        {active:"",name:"down1"},
        {active:"",name:"download"},
        {active:"",name:"edit1"},
        {active:"",name:"emoji1"},
        {active:"",name:"enclosure"},
        {active:"",name:"eraser"},
        {active:"",name:"favor1"},
        {active:"",name:"file"},
        {active:"",name:"file2"},
        {active:"",name:"fill"},
        {active:"",name:"fold1"},
        {active:"",name:"folderadd"},
        {active:"",name:"folder"},
        {active:"",name:"font"},
        {active:"",name:"friends"},
        {active:"",name:"goods1"},
        {active:"",name:"hangup"},
        {active:"",name:"hide"},
        {active:"",name:"history"},
        {active:"",name:"home1"},
        {active:"",name:"information"},
        {active:"",name:"left"},
        {active:"",name:"like1"},
        {active:"",name:"link1"},
        {active:"",name:"loading1"},
        {active:"",name:"location1"},
        {active:"",name:"lock1"},
        {active:"",name:"mail"},
        {active:"",name:"mark"},
        {active:"",name:"menu"},
        {active:"",name:"message1"},
        {active:"",name:"more1"},
        {active:"",name:"music"},
        {active:"",name:"my1"},
        {active:"",name:"notificationforbid"},
        {active:"",name:"notification1"},
        {active:"",name:"order1"},
        {active:"",name:"pause"},
        {active:"",name:"person2"},
        {active:"",name:"phone1"},
        {active:"",name:"pic1"},
        {active:"",name:"play"},
        {active:"",name:"question1"},
        {active:"",name:"record"},
        {active:"",name:"refresh1"},
        {active:"",name:"rest"},
        {active:"",name:"right1"},
        {active:"",name:"ringpause"},
        {active:"",name:"ring"},
        {active:"",name:"rotate"},
        {active:"",name:"roundclose1"},
        {active:"",name:"search1"},
        {active:"",name:"service1"},
        {active:"",name:"share1"},
        {active:"",name:"shopping"},
        {active:"",name:"sitting"},
        {active:"",name:"tag"},
        {active:"",name:"telephone"},
        {active:"",name:"todown"},
        {active:"",name:"toleft"},
        {active:"",name:"toright"},
        {active:"",name:"totop"},
        {active:"",name:"top1"},
        {active:"",name:"unfold1"},
        {active:"",name:"unlock1"},
        {active:"",name:"upload"},
        {active:"",name:"video"},
        {active:"",name:"all"},
        {active:"",name:"back1"},
        {active:"",name:"cart2"},
        {active:"",name:"category"},
        {active:"",name:"close1"},
        {active:"",name:"comments"},
        {active:"",name:"cry"},
        {active:"",name:"edit2"},
        {active:"",name:"email"},
        {active:"",name:"favorite"},
        {active:"",name:"folder1"},
        {active:"",name:"form1"},
        {active:"",name:"help"},
        {active:"",name:"information1"},
        {active:"",name:"less"},
        {active:"",name:"moreunfold"},
        {active:"",name:"more2"},
        {active:"",name:"pic2"},
        {active:"",name:"qrcode1"},
        {active:"",name:"refresh2"},
        {active:"",name:"rfq"},
        {active:"",name:"search2"},
        {active:"",name:"selected"},
        {active:"",name:"set"},
        {active:"",name:"smile"},
        {active:"",name:"success"},
        {active:"",name:"survey"},
        {active:"",name:"training"},
        {active:"",name:"viewgallery"},
        {active:"",name:"viewlist"},
        {active:"",name:"warning"},
        {active:"",name:"wrong"},
        {active:"",name:"account"},
        {active:"",name:"add2"},
        {active:"",name:"atm"},
        {active:"",name:"apps"},
        {active:"",name:"paintfill"},
        {active:"",name:"paint"},
        {active:"",name:"picfill"},
        {active:"",name:"yaochi"},
        {active:"",name:"clock"},
        {active:"",name:"remind1"},
        {active:"",name:"refresharrow"},
        {active:"",name:"markfill"},
        {active:"",name:"mark1"},
        {active:"",name:"presentfill"},
        {active:"",name:"repeal"},
        {active:"",name:"calendar"},
        {active:"",name:"wangwang"},
        {active:"",name:"time1"},
        {active:"",name:"alipay"},
        {active:"",name:"people2"},
        {active:"",name:"address"},
        {active:"",name:"natice"},
        {active:"",name:"man"},
        {active:"",name:"women"},
        {active:"",name:"add3"},
        {active:"",name:"album"},
        {active:"",name:"money"},
        {active:"",name:"people3"},
        {active:"",name:"phone2"},
        {active:"",name:"chat"},
        {active:"",name:"peoplefill"},
        {active:"",name:"people"},
        {active:"",name:"servicefill"},
        {active:"",name:"repair"},
        {active:"",name:"file1"},
        {active:"",name:"repairfill"},
        {active:"",name:"taoxiaopu"},
        {active:"",name:"attentionfill"},
        {active:"",name:"attention"},
        {active:"",name:"commandfill"},
        {active:"",name:"command"},
        {active:"",name:"communityfill"},
        {active:"",name:"community"},
        {active:"",name:"read"},
        {active:"",name:"attachment"},
        {active:"",name:"3column"},
        {active:"",name:"4column"},
        {active:"",name:"calendar1"},
        {active:"",name:"cut"},
        {active:"",name:"magic"},
        {active:"",name:"discount"},
        {active:"",name:"service2"},
        {active:"",name:"print"},
        {active:"",name:"box"},
        {active:"",name:"process"},
        {active:"",name:"backwardfill"},
        {active:"",name:"forwardfill1"},
        {active:"",name:"playfill"},
        {active:"",name:"stop"},
        {active:"",name:"tagfill"},
        {active:"",name:"tag1"},
        {active:"",name:"group"},
        {active:"",name:"bags"},
        {active:"",name:"beauty"},
        {active:"",name:"electrical"},
        {active:"",name:"home2"},
        {active:"",name:"electronics"},
        {active:"",name:"gifts"},
        {active:"",name:"apparel"},
        {active:"",name:"lights"},
        {active:"",name:"sports"},
        {active:"",name:"toys"},
        {active:"",name:"auto"},
        {active:"",name:"jewelry"},
        {active:"",name:"mac"},
        {active:"",name:"windows"},
        {active:"",name:"android"},
        {active:"",name:"windows8"},
        {active:"",name:"trade-assurance"},
        {active:"",name:"browse"},
        {active:"",name:"rfqqm"},
        {active:"",name:"rfqquantity"},
        {active:"",name:"rfq1"},
        {active:"",name:"scanning"},
        {active:"",name:"favorite1"},
        {active:"",name:"wechat"},
        {active:"",name:"compare"},
        {active:"",name:"filter1"},
        {active:"",name:"pin"},
        {active:"",name:"history1"},
        {active:"",name:"productfeatures"},
        {active:"",name:"supplierfeatures"},
        {active:"",name:"similarproduct"},
        {active:"",name:"all1"},
        {active:"",name:"backdelete"},
        {active:"",name:"hotfill"},
        {active:"",name:"hot"},
        {active:"",name:"post"},
        {active:"",name:"radiobox"},
        {active:"",name:"rounddown"},
        {active:"",name:"upload1"},
        {active:"",name:"writefill"},
        {active:"",name:"write"},
        {active:"",name:"radioboxfill"},
        {active:"",name:"link2"},
        {active:"",name:"cut1"},
        {active:"",name:"table"},
        {active:"",name:"navlist"},
        {active:"",name:"imagetext"},
        {active:"",name:"text"},
        {active:"",name:"move"},
        {active:"",name:"punch"},
        {active:"",name:"shake"},
        {active:"",name:"subtract"},
        {active:"",name:"dollar"},
        {active:"",name:"move1"},
        {active:"",name:"safe"},
        {active:"",name:"activityfill"},
        {active:"",name:"crownfill"},
        {active:"",name:"crown"},
        {active:"",name:"goodsfill"},
        {active:"",name:"messagefill"},
        {active:"",name:"profilefill"},
        {active:"",name:"sound"},
        {active:"",name:"sponsorfill"},
        {active:"",name:"sponsor"},
        {active:"",name:"upblock"},
        {active:"",name:"weblock"},
        {active:"",name:"weunblock"},
        {active:"",name:"wechat1"},
        {active:"",name:"raw"},
        {active:"",name:"office"},
        {active:"",name:"agriculture"},
        {active:"",name:"machinery"},
        {active:"",name:"assessedbadge"},
        {active:"",name:"gerenzhongxin"},
        {active:"",name:"jifen"},
        {active:"",name:"renwuguanli"},
        {active:"",name:"operation"},
        {active:"",name:"my2"},
        {active:"",name:"myfill1"},
        {active:"",name:"remind2"},
        {active:"",name:"icondownload"},
        {active:"",name:"map"},
        {active:"",name:"bad1"},
        {active:"",name:"good"},
        {active:"",name:"skip"},
        {active:"",name:"iconfontplay2"},
        {active:"",name:"iconfontstop"},
        {active:"",name:"compass"},
        {active:"",name:"security"},
        {active:"",name:"share2"},
        {active:"",name:"store"},
        {active:"",name:"manageorder"},
        {active:"",name:"rejectedorder"},
        {active:"",name:"bussinessman"},
        {active:"",name:"emojifill"},
        {active:"",name:"emojiflashfill"},
        {active:"",name:"shoes"},
        {active:"",name:"mobilephone"},
        {active:"",name:"record1"},
        {active:"",name:"text1"},
        {active:"",name:"videofill"},
        {active:"",name:"video1"},
        {active:"",name:"emailfilling"},
        {active:"",name:"favoritesfilling"},
        {active:"",name:"accountfilling"},
        {active:"",name:"bussinesscard"},
        {active:"",name:"creditlevel"},
        {active:"",name:"creditlevelfilling"},
        {active:"",name:"card012"},
        {active:"",name:"exl"},
        {active:"",name:"pdf"},
        {active:"",name:"zip"},
        {active:"",name:"sorting"},
        {active:"",name:"copy2"},
        {active:"",name:"city"},
        {active:"",name:"city1"},
        {active:"",name:"city2"},
        {active:"",name:"shengfen"},
        {active:"",name:"shengfen1"},
        {active:"",name:"xiangmuzhouqi"}
      ],
      curIndex:0,//当前选中的索引
    };
  },
  created() {},
  props: [],
  components: {},
  mounted() {},
  methods: {
      chooseThisIcon(row,index) { 
          this.list.forEach((item, idx) => {
              if(idx == index) {
                if(item.active == "active") {
                  item.active = ""
                } else {
                  item.active = "active"
                  this.curIndex = index;
                  this.$parent.group.current.url = "icon icon-"+item.name;
                }
              } else {
                item.active="";
              }
          })
      },
  },
  computed: {},
  watch: {}
};
</script>
<style scoped lang="scss">
.vlonChooseIcon {
  display: flex;
  padding: 15px;
  box-sizing: border-box;
  flex-wrap: wrap;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  nav {
    width: 90px;
    height: 70px;
    margin: 0 15px 15px 0;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    span.icon {
      width: 35px;
      height: 35px;
      margin-bottom: 5px;
      font-size: 30px;
    }
    span.text {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      color: #666;flex-wrap: wrap;word-wrap: wrap;
    }
    &:hover,
    &.active {
      border-color: #0079fe;
      span.text {
        color: #0079fe;
      }
    }
  }
}
</style>